import { Table, Space, Button, Input, Tag, Card,message } from "antd";
import { useTypes } from "../../hook/types";
import { useEffect } from "react";
import { useHistory } from "react-router";
import TypesApi from "../../api/types"

const { Search } = Input;
// 修改方法初始化
let reset = () => console.log("defalut");
// 删除方法初始化
let delType = () => console.log("defalut");
// import { useHistory } from "react-router";
const columns = [
    {
        title: '总类型',
        dataIndex: 'title',
        key: 'title',
    },
    {
        title: '子类型',
        dataIndex: 'labels',
        key: 'labels',
        render: labels => (
            <span>
                {labels.map(item => {
                    return (
                        <Tag key={item._id}>
                            {item.title}
                        </Tag>
                    );
                })}
            </span>
        ),
    },
    {
        title: '操作',
        key: 'action',
        render: record => (
            <Space size="middle">
                <Button value={record._id} onClick={(e) => reset(e)}>修改</Button>
                <Button value={record._id} onClick={(e) => delType(e)}>删除</Button>
            </Space>
        ),
    },
];

//eslint-disable-next-line
export default () => {
    const history = useHistory()
    const onSearch = value => console.log(value);
    const [{ rows, eachPage, curPage, total }, { getTypes,setCurPage }] = useTypes();
    // 数据请求
    useEffect(() => {
        getTypes();
    }, [getTypes]);

    // 修改类型信息
    reset = async (e) => {
        if (e.target.type === "button") {
            const _id = e.target.value;
            console.log(_id);
            history.push(`/info/type/reset/${_id}`)
        }
    }

    // 删除类型信息
    delType = async (e) => {
        if (e.target.type === "button") {
            const _id = e.target.value;
            await TypesApi.del({ _id });
            message.success("删除成功")
            getTypes();
        }
    }

    return (
        <div className="site-card-border-less-wrapper">
            <Card title="查询" bordered={true}>
                <Search placeholder="请输入您要查询的内容" onSearch={onSearch} enterButton style={{ width: "240px" }} />
            </Card>
            <div style={{ height: "30px" }}></div>
            <Card title="商品类型列表" bordered={true}>
                <Table columns={columns} pagination={{
                    current: curPage, pageSize: eachPage, total,onChange:setCurPage
                }} dataSource={rows} rowKey={record => record._id} />
            </Card>
        </div>
    )
}